layout-con 自适应双容器

一、单双容器切换组件

layout-con 单双容器切换组件,根据当前页面的宽度自动适应是单容器布局还是双容器布局。

二、属性说明

属性名 类型 默认值 必填 说明
class-name String 容器类名
left-class-name String 左容器类名
right-class-name String 右容器类名
layout-single-class-name String 当为单容器时类名
minWidth Number 1720 单双容器的切换的临界点
layoutRightVoice String 右侧容器语音类型
layoutLeftVoice String scroll-vertical 左侧容器语音类型
bindlayoutRightLower EventHandle 右侧容易加载更多回调(同时应用于单容器)
bindscroll EventHandle 容器滚动事件,name区分滚动容器

三、slot

名称 说明
left 左侧内容
right 右侧内容

四、示例

swan

<layout-con layout-single-class-name="layout-single">
    <view slot="left" class="left-con">
        <text>左侧内容</text>
    </view>
    <view slot="right" class="right-con">
        <text>右侧内容</text>
    </view>
</layout-con>

css

.left-con {
    height: 100%;
}
.right-con {
    height: 100%;
}
.layout-single .left-con,  .layout-single .right-con{
    height: auto;
    overflow: hidden;
}

josn

{
    "navigationBarTitleText": "单双容器组件",
    "usingComponents": {
        "layout-con": "iov-ui/lib/layout-con"
    }
}
image-preview图片预览loading 加载